import React, { useCallback } from 'react';
import { Drawer, Button } from 'antd';
import { connect } from 'react-redux';
import { setGlobalState } from '../../actions';

function DrawButton({ drawReactMain, setGlobalState }) {
  const showDrawer = useCallback(() => {
    // setGlobalState({ drawReactMain: true });    正常情况下修改state
    React.$setGlobalState({ drawReactMain: true }); //修改微前端state
  }, []);
  const onClose = useCallback(() => {
    // setGlobalState({ drawReactMain: false });    正常情况下修改state
    React.$setGlobalState({ drawReactMain: false }); //修改微前端state
  }, []);
  return (
    <>
      <Button type="primary" onClick={showDrawer}>
        打开reactMian主应用抽屉
      </Button>
      <Drawer title="Basic Drawer" placement="right" onClose={onClose} visible={drawReactMain}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Drawer>
    </>
  );
}

export default connect(
  (state) => ({
    drawReactMain: state.global.drawReactMain,
  }),
  { setGlobalState },
)(DrawButton);
